<!-- 治疗任务-写病历 -->
<template>
  <div>
    <Dialog :title="title" :visible="visible" :reveal="true" :loading="loading" class="two-columns" @close="handleClose" @confirm="submitForm">
      <el-form ref="medicalFormRef" :rules="medicalFormRules" :model="medicalForm" label-position="right" label-width="100px">
        <UserInfo v-if="control" :info-id="medicalForm.customerId" class="UserInfoCss" />
        <div v-else>
          <el-form-item label="顾客：" :prop="control?'':'customerName'">
            <el-autocomplete v-model="medicalForm.customerName" :fetch-suggestions="querySearch" style="width:237.5px" @select="handleSelectCustomer" />
          </el-form-item>
          <el-form-item label="所属项目：" prop="projectName">
            <el-select v-model="medicalForm.projectName" style="width: 237.5px;" class="el-select-y" filterable placeholder="请选择" @change="handleSelectProject">
              <el-option v-for="item in projectNameOptions" :key="item.id" :label="item.projectName" :value="item.projectId" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="病历模板：" prop="medicalRecordType">
          <el-select v-model="medicalForm.medicalRecordType" style="width: 237.5px;" class="el-select-y" placeholder="请选择" @change="handleSeleteTemlate">
            <el-option v-for="item in casesOptions" :key="item.id" :label="item.secondType" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="病历内容：" prop="medicalRecordContent">
          <Editor id="editor_id" v-model="medicalForm.medicalRecordContent" height="300px" width="85%" :content.sync="editorText" :load-style-mode="false" @on-content-change="onContentChange" />
        </el-form-item>
      </el-form>
      <!-- <el-row type="flex" justify="center">
        <el-col :span="3">
          <el-button @click="submitForm">提交</el-button>
        </el-col>
        <el-col :span="3">
          <el-button @click="handleClose">取消</el-button>
        </el-col>
      </el-row> -->
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/components/Dialog/index";
import UserInfo from "@/components/UserInformation";
import Editor from './kindeditor';
// let vm;
export default {
  components: {
    Dialog,
    UserInfo,
    Editor,
  },
  props: {
    title: {
      type: String,
      default: '写病历',
    },
    reveal: {
      type: Boolean,
      default: false,
    },
    control: {
      type: Boolean,
      default: true,
    },
    selectedRow: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      medicalForm: {},
      // medicalContentData: [], // 顾客病历内容
      customerOptions: [],
      casesOptions: [],
      projectNameOptions: [],
      restaurants: [],
      editorText: '', // 同步的变量
      visible: false,
      loading: false,
      // isPhone: false,
      // isIdNumber: false,
      medicalFormRules: {
        customerName: [
          { required: true, message: '请选择顾客', trigger: ['blur', 'change'] },
        ],
        medicalRecordType: [
          { required: true, message: '请选择病历模板', trigger: 'change' },
        ],
      },
    };
  },
  // created() {
  //   vm = this;
  // },
  mounted() {
    this.$emit('childMounted');
    this.loadAll();
  },
  methods: {
    openDialog(row) {
      this.visible = true;
      this.medicalForm = row;
      this.getCasesTemplate();
    },
    async medicalBtn(row) {
      if (row) {
        this.medicalForm = row;
        this.editorText = row.medicalRecordContent;
      }
      this.visible = true;
      this.getCasesTemplate();
    },
    async getCasesTemplate() {
      const res = await this.$api['department/consumables/casesList']({ query: { type: '病例模板' }});
      if (res.code === 200) {
        this.casesOptions = res.data;
      }
    },
    // 选中的病例模板
    handleSeleteTemlate(id) {
      this.casesOptions.map(item => {
        if (item.id === id) {
          this.medicalForm.medicalRecordType = item.secondType;
          this.editorText = item.template;
        }
      });
    },
    async loadAll() {
      const res = await this.$api["reception/subscribe/findall"]();
      if (res.code === 200) {
        res.data.map((item) => {
          item.value = item.name;
        });
        this.restaurants = res.data;
      }
    },
    querySearch(queryString, cb) {
      console.log(queryString, cb);
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        if (restaurant.value) {
          return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
          );
        } else {
          return null;
        }
      };
    },
    handleSelectCustomer(item) {
      this.$set(this.medicalForm, 'customerName', item.name);
      this.$set(this.medicalForm, 'customerId', item.id);
      this.getProjectName(item.id);
    },
    // 顾客已购项目
    async getProjectName(id) {
      this.projectNameOptions = [];
      const res = await this.$api["reception/subscribe/deductionRecordLists"]({ customerId: id });
      if (res.code === 200) {
        this.projectNameOptions = res.data;
      }
    },
    handleSelectProject(id) {
      this.medicalForm.projectId = id;
      this.projectNameOptions.map(item => {
        if (item.projectId === id) {
          this.medicalForm.projectName = item.projectName;
        }
      });
    },
    onContentChange(val) {
      this.medicalForm.medicalRecordContent = val;
    },
    submitForm() {
      this.$refs.medicalFormRef.validate(async valid => {
        if (valid) {
          this.loading = true;
          const res = await this.$api['department/consumables/addmedicalrecord']({ ...this.medicalForm });
          this.loading = false;
          // console.log(res, 'success');
          if (res.code !== 200) return this.$message.error('添加病历失败!');
          this.$message.success('添加病历成功！');
          this.visible = false;
          this.$emit('success');
        }
      });
    },
    handleClose() {
      this.visible = false;
      this.editorText = '';
      this.$refs.medicalFormRef.resetFields();
      this.$emit('success');
      this.$emit('componentResult', "close");
    },
  },
};
</script>
<style lang="scss" scoped>s
.display-complete{
  color:#AAAAAA;
  margin-left: 10px;
  cursor: pointer;
}
.UserInfoCss{
  margin: 0 0 15px 0;
}
::v-deep .el-select{
  width: 85%;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 18px;
}
</style>
